<template>
    <div class="row g-5 dv-global-theme-primary">
        <div v-for="count in 4" class="col-6 scale-50 dv-spaceship" :key="count"
             style="height: 340px">
            <div class="brief-view bg-warning" :class="'view-demo-'+count">
                <dv-view-bg :view-bg="viewBg" :holder-enabled="false"></dv-view-bg>
            </div>
        </div>
        <div v-for="count in 4" class="col-6 scale-50 dv-spaceship" :key="count"
             style="height: 880px">
            <div class="brief-view brief-view-ln bg-warning" :class="'view-demo-'+(count+4)">
                <dv-view-bg :view-bg="viewBg" :holder-enabled="false"></dv-view-bg>
            </div>
        </div>
    </div>
</template>

<script>
    import DvViewBg from "../DvViewBg";

    export default {
        name: "DvViewDrawLab",
        data() {
            return {
                viewBg: require('../../assets/image/spaceship/views/view-bg-color.png')
            }
        },
        components: {DvViewBg},
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/sass/style";

    .scale-50 {
        @include dv-transform-origin(0 0);
        @include dv-transform(scale(0.5));
    }

    .view-demo-1 {
        width: 960px;
        height: 540px;
    }

    .view-demo-2 {
        width: 720px;
        height: 540px;
    }

    .view-demo-3 {
        width: 1200px;
        height: 675px;
    }

    .view-demo-4 {
        width: 900px;
        height: 675px;
    }

    .view-demo-5 {
        width: 960px;
        height: 1760px;
    }

    .view-demo-6 {
        width: 720px;
        height: 1760px;
    }

    .view-demo-7 {
        width: 1200px;
        height: 1560px;
    }

    .view-demo-8 {
        width: 900px;
        height: 1560px;
    }
</style>